<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            width: 100%;
        }

        table {
            display: flex;
            justify-content: center;
            width: 25%;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        tbody {
            display: block;
            width: 100%;
            margin: 0 10%;
            text-align: center;
        }

        tbody tr:first-child {
            background-color: #999;
        }
    </style>
</head>

<body>
    <script>

        var year = parseInt(prompt('输入年份：', '2022'));
        document.write(calendar(year));//调用函数,生成指定年份的年历

        // 定义年历生成函数
        function calendar(y) {

            // 获取指定年份1月1日的星期数值
            var w = new Date(y, 0).getDay();

            var html = '<div class="box">';

            // 拼接每个月份的表格
            for (m = 1; m <= 12; ++m) {
                html += '<table>';
                html += '<tr><th colspan="7">' + y + ' 年 ' + m + ' 月</th></tr>';
                html += '<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>';


                // 获取月份m共有多少天
                var max = new Date(y, m, 0).getDate();

                html += '<tr>';                         // 开始<tr>标签
                for (d = 1; d <= max; ++d) {
                    if (w && d == 1) {                  // 如果该月的第1天不是星期日，则填充空白
                        html += '<td colspan="' + w + '"> </td>';
                    }
                    console.log(w);
                    html += '<td>' + d + '</td>';
                    if (w == 6 && d != max) {           // 如果星期六不是该月的最后一天，则换行
                        html += '</tr><tr>';
                    } else if (d == max) {               // 该月的最后一天，闭合<tr>标签
                        html += '</tr>';
                    }
                    w = (w + 1 > 6) ? 0 : w + 1;
                }
                html += '</table>';
            }
            html += '</div>';
            return html;
        }
    </script>
</body>

</html>